<template>
  <div class="rechargeDetail">
    <!-- 引入公共头部 -->
    <NavBar title="充值记录" url="/user/wallet" fixed back/>
      <van-list
        style="padding-top: 40px"
        v-model="loading"
        :finished="finished"
        @load="onLoad"
      >
        <div class="van-cell"  v-for="(item, index) in list" :key="index">
          <div class="van-cell__title">
            <van-cell-group>
              <van-row>
                <van-col span="22">
                  <van-cell :title="'金额:' + item.balance + '元'" :label="UTILS.formatDateTime(item.createTime)"/>
                </van-col>
                <van-col span="2" >
                  <van-icon :name="formatStatus(item.status)" />
                </van-col>
              </van-row>
            </van-cell-group>
          </div>
        </div>
      </van-list>
    <EmptyData text="暂无充值记录" v-if="list.length === 0"/>
    </div>
</template>
<script>
import NavBar from '../../components/common/NavBar.vue'
import rechargeDetailApi from '../../api/user'
import {Toast} from 'vant'
import EmptyData from '../../components/common/EmptyData.vue'

export default {
  name: 'rechargeDetail',
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      currentPage: 1,
      pageSize: 12,
      empty: false
    }
  },
  mounted () {
  },
  methods: {
    formatStatus: function (val) {
      return val === 1 ? 'success' : 'fail'
    },
    getRechargeDetail: function () {
      const _this = this
      rechargeDetailApi.getRechargeDetail(this.currentPage, this.pageSize).then(function (res) {
        if (res.data.success) {
          if (res.data.re.memberRechargeHistoryList.length === 0) {
            _this.empty = true
          } else {
            for (let i = 0, j = res.data.re.memberRechargeHistoryList.length; i < j; i++) {
              _this.list.push(res.data.re.memberRechargeHistoryList[i])
            }
            _this.currentPage = _this.currentPage + 1
          }
          _this.loading = false
          // 数据全部加载完成
          if (_this.list.length >= res.data.re.totalNum) {
            // 加载状态结束
            _this.finished = true
          }
        } else {
          Toast.fail(res.data.msg)
        }
      }).catch(function () {
        Toast.fail('加载异常！')
      })
    },
    onLoad: function () {
      let _this = this
      // 异步更新数据
      setTimeout(() => {
        _this.getRechargeDetail()
      }, 250)
    }
  },
  components: {
    NavBar,
    EmptyData
  }
}
</script>
